<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<view class="group_1 flex-col">
			<view class="block_5 flex-col ">
				<swiper class="swiper" indicator-active-color="#fff" :indicator-dots="false" :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in dataInfo.sliderImage">
						<image :src="item" mode=""></image>
					</swiper-item>

				</swiper>
			</view>

			<view class="block_6 flex-col">
				<view class=" block_71 dis">
					<view class="block_71-left">￥{{dataInfo.price}}</view>
					<view class="block_71-right">{{dataInfo.sales}}人约过</view>
				</view>
				<view class="block_7 ">
					<text class="text_8">{{dataInfo.name}}</text>
					<view class="block_8 flex-row">
						<view class="text-wrapper_1 bgb flex-col" v-for="(items,index) in dataInfo.tags" :key="index">
							<text class="text_9 bc">{{items}}</text>
						</view>

					</view>
				</view>

				<view class="block_10 ">
					<view class="section_3 flex-row">
						<view class="image-text_1 flex-row ">
							<image class="label_1" src="@/static/pagesA/icon_dw.png" mode=""></image>
							<text class="text-group_1">地址:</text>
						</view>
						<view class="flex-row" style=" width: 80%;" @click="openLocation()">
							<view class="text_12" style="width: 94%;">{{dataInfo.address}}</view>
							<image class="label_15" src="@/static/pagesA/icon_dh.png" mode=""></image>
						</view>

					</view>
					<view class="section_3 flex-row ">
						<view class="image-text_1 flex-row ">
							<view class="dis" style="align-items: center;">
								<image class="label_1" src="../../static/com/icon_lxfs.png" mode=""></image>
								<!-- <image class="label_1" src="@/static/pagesA/icon_dt.png" mode=""></image> -->
								<text class="text-group_1">联系方式:</text>
							</view>
							<view></view>

						</view>
						<text class="text_12" @click="call(dataInfo.phone)">{{dataInfo.phone}}</text>
					</view>
				</view>

			</view>
			<view class="block_20 flex-col">
				<text class="text_36">场馆介绍</text>
				<jyf-parser :html="dataInfo.info" ref="article" :tag-style="tagStyle"></jyf-parser>

			</view>
		</view>
		<view class="ding">

		</view>
		<view class="footer">
			<view class="footer-btn" @click="goPage">
				立即预约
			</view>

		</view>
		<uni-popup ref="safeguardPup" type="bottom">
		
			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
		
				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>
		
				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="dataInfo.name" :des="dataInfo.description"
			:headerImg="dataInfo.image" :subTitle='"￥"+dataInfo.price'></qrcode-poster>
		<home></home>
	</view>
</template>
<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getVenueInfo
	} from '@/api/togeterRich/index.js'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			QrcodePoster,
			MxDatePicker,
			"jyf-parser": parser,
			home
		},
		data() {
			return {
				dataInfo: {},
				id: '',
				islookMorePup: 0,
				showPicker: false,

				range: ['2023/01/01', '2023/01/06'],

				type: 'rangetime',
				value: '',
				constants: {

				},
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods: {
			saveImgeOK(){
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;
			
				}
			},
			init() {
				getVenueInfo(this.id).then(res => {
					console.log(res, 'dff')
					this.dataInfo = res.data
				})
			},
			goPage() {
				uni.navigateTo({
					url: "/pagesA/venueReservation/pay?id=" + this.id
				})
			},
			lookMore(type) {
				this.islookMorePup = type

				this.$refs.lookMorePup.open()
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			openLocation() {
				uni.openLocation({
					latitude: 30.18534, // 目标纬度
					longitude: 120.26457, // 目标经度
					name: '目标位置',
					address: '目标位置的地址',
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.bc{
			color: $maincolor !important;
		}
		.bgb{
			border: 2rpx solid $maincolor !important;
		}
		.bb{
			background: $maincolor;
		}
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx 0;

		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}

	.block_71 {
		align-items: center;
		background: #fff;
		padding: 30rpx 30rpx 0 30rpx;

		.block_71-left {
			font-size: 44rpx;
			color: $maincolor;

		}

		.block_71-right {
			font-size: 24rpx;
			color: #F05208;
			margin-left: 20rpx;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx 0;
		align-items: center;
		justify-content: space-around;

		.footer-btn {

			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
			padding: 0 100rpx;
		}
	}

	.safeguardPup-wrap {
		.des {
			font-size: 28rpx;
			color: #999;
		}

		.ptsstit {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
			text-align: left;
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.safeguardPup-msg {
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;

			.safeguardPup-msg-img {
				width: 100%;
				height: 344rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		width: 100%;
		height: 1000rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow-y: scroll;
	}

	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	@import '@/pagesA/BeautifulEconomy/com/homstayInfo.css';

	@import '@/com/css/common.css';
</style>